<template>
	<view class="page">
		<!-- 轮播区域 -->
		<swiper indicator-dots circular :interval="3000" autoplay>
			<swiper-item :key="index" v-for="(item,index) in slideShowLists"><image :src="item.img" mode=""></image></swiper-item>
		</swiper>
		<!-- 导航区域 -->
		<view class="nav">
			<view class="nav_item" v-for="(item,index) in navItemLists" :key="index" @click="navItemto(item.url)">
				<view :class="item.name"></view>
				<text>{{item.title}}</text>
			</view>
		</view>
		<!-- 推荐商品区域 -->
		<view class="hot_goods">
			<view class="tit">推荐商品</view>
			<goods-list :hotGoodsList="hotGoodsList" @goGoodsDetail="goGoodsDetail"></goods-list>
		</view>
	</view>
</template>
<script>
	import goodsList from '../../components/goodsList/index.vue'
	export default{
		data(){
			return {
				slideShowLists:[],
				hotGoodsList:[],
				navItemLists:[{
					name:'iconfont icon-ziyuan',
					title:'黑马超市',
					url:'/pages/goods/index'
				},{
					name:'iconfont icon-guanyuwomen',
					title:'联系我们',
					url:'/pages/contact/index'
				},{
					name:'iconfont icon-tupian',
					title:'社区图片',
					url:'/pages/community/index'
				},{
					name:'iconfont icon-shipin',
					title:'学习视频',
					url:'/pages/study/index'
				}]
			}
		},
		components:{
			goodsList
		},
		onLoad(){
			this.getSwipers()
			this.getHotGoods()
		},
		methods:{
			// 获取轮播图
			getSwipers(){
				this.$myRequest({
						url:'/api/getlunbo'
					}).then(res=>{
	
						this.slideShowLists=res.data.message
					}).catch(err=>{
						
					})
				},
			// 获取推荐商品数据
			getHotGoods(){
				this.$myRequest({
					url:'/api/getgoods?pageindex=1'
				}).then(res=>{
					console.log(res)
					this.hotGoodsList=res.data.message
				}).catch(err=>{
					console.log(err)
				})
			},
			navItemto(url){
				
				uni.navigateTo({
					url:url,
					success:()=>{
						console.log(444)
					},
					fail: () => {
						console.log('失败')
					}
				})
			},
			// 跳转到商品详情页
			goGoodsDetail(id){
				uni.navigateTo({
					url:`../goods-detail/goods-detail?id=${id}`
				})
			}
		}
	}
</script>
<style lang="scss">
	.page{
		swiper{
			width:750rpx;
			height:380rpx;
			image{
				width:100%;
				height:100%;
			}
		}
		.nav{
			display:flex;
			.nav_item{
					
				flex:1;
				text-align:center;
				font-size:30rpx;
				view{
					height:120rpx;
					width:120rpx;
					background-color: $shop-color;
					border-radius:50%;
					margin-left:50%;
					margin-top:15rpx;
					margin-bottom: 15rpx;
					transform: translate(-50%,0);
					line-height: 120rpx;
					color:#fff;
					font-size:50rpx;
				}
				.icon-tupian{
					font-size:40rpx;
				}
			}
		}
		.hot_goods{
			
			overflow: hidden;
			background-color: #eee;
			margin-top:10rpx;
			.tit{
				height:100rpx;
				line-height:100rpx;
				text-align:center;
				color:$shop-color;
				letter-spacing: 30rpx;
				font-size:40rpx;
				font-weight:bold;
				margin:6rpx 0;
				background-color: #fff;
				
			}
	
			
		}
	}

	
</style>